<template>
  <view class="my-userinfo-container">
    <!-- 头像昵称区域 -->
    <view class="top-box">
      <image :src="userinfo.avatarUrl" class="avatar"></image>
      <view class="nameAndFollow">
        <view class="top-name">
          <view class="nickname">{{userinfo.nickName}}</view>
        </view>
        <view class="follow-fans">
        <view class="my-follow" @click="viewFollow">{{ followCount }}&nbsp;关注</view>
        <view class="my-fans" @click="viewFans">{{ fansCount }}&nbsp;粉丝</view>
      </view>
      </view>
    </view>

    <!-- 面板的列表区域 -->
    <view class="panel-list">

      <!-- 第三个面板 -->
      <view class="panel" style="margin-bottom: 13px;">
        <farmer-panel v-if="userinfo.status==1"></farmer-panel>
        <!-- <view class="panel-list-item0" @click="editUserInfo">
          <text>编辑资料</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view> -->
        <view class="panel-list-item0" @click="my_chat">
          <text>我的消息</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item1">
          <button open-type="contact" bindcontact="handleContact" send-message-title="组团鸭客服"
            send-message-path="pages/my/my" show-message-card="true" session-from="service.content">联系客服
          </button>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item2" @click="logout">
          <text>退出登录</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
      </view>
      <view style="height: 20px;"></view>

    </view>
  </view>
</template>

<script>
  // 按需导入 mapState 辅助函数
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: {
      followCount: {
        type: Number,
        default: 0,
      },
      fansCount: {
        type: Number,
        default: 0,
      },
    },
    
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['userinfo']),
    },
    data() {
      return {
        num:0,
      }
    },

    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']),

      my_chat(){
        uni.navigateTo({
          url: '/subpkg/my_chat/my_chat',
        });
      },
      viewFollow(){
        uni.navigateTo({
          url: '/subpkg/my_follow/my_follow',
        });
      },
      
      viewFans(){
        uni.navigateTo({
          url: '/subpkg/my_fans/my_fans',
        });
      },

      editUserInfo(){
        uni.navigateTo({
          url: '/subpkg/edit_userInfo/edit_userInfo',
        });
      },
    
      async logout() {
        // 询问用户是否退出登录
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)
        if (succ && succ.confirm) {
          // 用户确认了退出登录的操作
          // 需要清空 vuex 中的 userinfo、token 和 address
          this.updateUserInfo({})
          this.updateToken('')
          this.updateAddress({})
        }
      },
      handleContact(event) {
        console.log(event.path)
      },
      // 选择收货地址
      chooseAddressDemo() {
        // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
        uni.chooseAddress({
          success: (res) => {
            this.updateAddress(res)
          }
        })

      }
    }
  }
</script>

<style lang="scss">
  .my-userinfo-container {
    height: 100%;
    // 为整个组件的结构添加浅灰色的背景
    background-color: #f4f4f4;



    .top-box {
      height: 300rpx;

      display: flex;
      align-items: center;
      padding-left: 30px;
      background-image: url('https://child-start.oss-cn-shenzhen.aliyuncs.com/background1.png');
      /* 波纹背景图路径 */
      background-size: cover;
      background-repeat: repeat-x;
      position: relative;
      animation: waveAnimation 60s linear infinite;

      @keyframes waveAnimation {
        0% {
          background-position-x: 0;
        }

        100% {
          background-position-x: 3000px;
          /* 波纹移动的距离 */
        }
      }



      .avatar {
        display: block;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 1px 5px black;
      }

      .top-name {
        display: flex;
        flex-direction: column;
        padding-left: 30rpx;

        .nickname {
          color: #383838;
          font-weight: bold;
          font-size: 17px;
          max-width: 60vw;
        }
      }

    }
  }


  .panel-list {
    padding: 0 10px;
    margin-top: 20px;


    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;


      .panel-body {
        display: flex;
        justify-content: space-around;


        .panel-item {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 13px;


          .icon {
            width: 35px;
            height: 35px;
            padding-bottom: 5px;
          }
        }
      }
    }
  }

  .panel-list-item1 {
    height: 45px;
    display: flex;
    color: #303133;
    justify-content: space-between;
    font-size: 14px;
    padding: 0 15px;
    font-weight: 500;
    line-height: 48px;
    border-bottom: 1px solid #ebeef5;

    button::after {
      border: none;
    }

    button {
      height: 45px;
      padding: 0px;
      background-color: transparent;
      font-weight: 500;
      line-height: 48px;
      margin: 0px;
      font-size: 14px;
      border: none;
      border-radius: 0%;
      box-sizing: inherit;
      display: flex;
      justify-content: flex-start;
      color: #303133;
    }
  }

  .panel-list-item2 {
    height: 48px;
    line-height: 48px;
    display: flex;
    color: #303133;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 0 15px;

  }
  .panel-list-item0 {
    height: 48px;
    line-height: 48px;
    display: flex;
    color: #303133;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 0 15px;
    border-bottom: 1px solid #ebeef5;
  }

  .follow-fans {
    display: flex;
    font-size: 14px;
    padding-left: 31rpx;
    padding-top: 10px;

    .my-follow {
      margin-right: 40px;
    }
    
  }
</style>